<script>

export default {
  name: "MainView",
  computed: {
    cartAmount () {
      let amount = 0
      for (let i = 0; i < this.cart.length; i++) {
        amount += this.cart[i].price * this.cart[i].quantity
      }
      return amount
    }
  },
  data(){
    return {
      addrModal: false,
      cart: [],
      cartModal: false,
      allSpData: [],
      addrForm: {
        name: '',
        phoneNumber: '',
        postCode: '',
        province: '',
        city: '',
        region: '',
        detailAddress: ''
      },
      personAddr:[]
    }
  },
  methods: {
    queryAddrs() {
      this.$axios.get(
          "/member/address/list"
      ).then(
          (resp) => {
            this.personAddr = resp.data.data
          }
      ).catch(
          () => {
            console.log(123)
          }
      )
    },
    addAddr(){
      this.$axios.post(
          "/member/address/add",
          this.addrForm
      ).then(
          (resp) => {
            if (resp.data.code == 200) {
              alert("添加成功")
              this.addrModal = false
              this.queryAddrs()
            }else{
              alert("添加失败，" + resp.data.message)
            }
          }
      ).catch(
          () => {
            console.log('失败')
          }
      )
    },
    showCart(){
      this.cartModal = true
    },
    addToCart(sp) {
      this.$axios.post(
          "/cart/add",
          {
            productId: sp.id,
            productPic: sp.pic,
            productName: sp.name,
            price: sp.price
          },
      ).then(
          (resp) => {
            if (resp.data.code == 200) {
              alert("添加成功")
              this.queryCart()
            }else{
              alert("添加失败，" + resp.data.message)
            }
          }
      ).catch(
          () => {
            alert("添加失败，未知原因")
          }
      )
    },
    queryCart() {
      // 查询购物车
      this.$axios.get(
          "/cart/list"
      ).then(
          (resp) => {
            this.cart = resp.data.data
          }
      ).catch(
          () => {
            alert("获取购物车信息失败")
          }
      )
    },
    deleteAddr(id){
      this.$axios.post(
          "/member/address/delete/" + id
      ).then(
          (resp) => {
            if (resp.data.code == 200) {
              alert("删除成功")
              this.queryAddrs()
            }else{
              alert("删除失败，" + resp.data.message)
            }
          }
      ).catch(
          () => {
            alert("删除失败，未知原因")
          }
      )
    },
    cartDelete(cartIds){
      this.$axios.post(
          "/cart/delete",
          null,
          {
            params: {
              ids: cartIds
            }
          }
      ).then(
          (resp) => {
            if (resp.data.code == 200) {
              alert("删除成功")
              this.queryCart()
            }else{
              alert("删除失败，" + resp.data.message)
            }
          }
      ).catch(
          () => {
            alert("服务器出错")
          }
      )
    },
    queryAll () {
      this.$axios.get(
          "/product/search",
      ).then(
          (resp) => {
            this.allSpData = resp.data.data
          }
      ).catch(
          () => {
            alert("错误")
          }
      )
    },
    checkout () {
      alert(123)
    },
    goMyOrder(){
      this.$router.push("/order")
    },
    goMain(){
      this.$router.push("/main")
    }
  },
  mounted(){
    // 获取商品列表
    this.queryAll()
    // 获取购物车
    this.queryCart()
    // 获取地址
    this.queryAddrs()
  }
}
</script>

<template>
  <div style="width: 100vw;height: 100vh">
    <div class="header">
      <div class="brand">卖夕夕</div>

      <div class="user-info">
        <button id="logoutBtn" @click="goMyOrder">我的订单</button>
        <button id="cartBtn" @click="goMain">首页</button>
      </div>
    </div>

    <div class="address-list">
      <!-- Address cards example -->
      <div class="address-card" v-for="addr in personAddr">
        <div class="address-info">
          <h3>收货人: {{addr.name}}</h3>
          <p>联系电话: {{addr.phoneNumber}}</p>
          <p>地址: {{addr.province}} {{addr.city}} {{addr.region}} {{addr.detailAddress}}</p>
          <p>邮政编码: {{addr.postCode}} </p>
        </div>
        <div class="address-actions">
          <button @click="deleteAddr(addr.id)">删除</button>
        </div>
      </div>
      <!-- Repeat address cards as needed -->
    </div>

    <div class="add-address">
      <button @click="addrModal = true">添加新地址</button>
    </div>

    <!-- Product Detail Modal -->
    <div id="productModal" class="modal" v-if="false">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2 id="modalProductTitle">商品名称</h2>
        <img id="modalProductImage" src="https://via.placeholder.com/250" alt="Product Image" class="product-image">
        <p id="modalProductDescription">商品描述</p>
        <p class="product-price" id="modalProductPrice">¥100</p>
        <button onclick="addToCart('商品名称', 100)" class="add-to-cart">加入购物车</button>
      </div>
    </div>

    <!-- Shopping Cart Modal -->
    <div id="cartModal" class="modal" v-if="cartModal">
      <div class="modal-content cart-modal-content">
        <span class="close" @click="cartModal = false">&times;</span>
        <h2>购物车</h2>
        <div id="cartItems">
          <div class="cart-item" v-for="(item, index) in cart">
            <img :src="item.productPic" alt="Product Image">
            <div class="cart-item-details">
              <h4 class="cart-item-title">{{item.productName}}</h4>
              <p class="cart-item-price">{{item.price}}元 x {{item.quantity}}</p>
              <!--            <div class="cart-item-quantity">-->
              <!--              <button class="quantity-btn">-</button>-->
              <!--              <input type="text" v-model="item.quantity" readonly>-->
              <!--              <button class="quantity-btn">+</button>-->
              <!--            </div>-->
            </div>
            <span class="cart-item-remove" @click="cartDelete(item.id)">&times;</span>
          </div>
        </div>
        <div class="cart-summary">
          <h3 id="totalPrice">总价: ¥{{cartAmount}}</h3>
          <button onclick="checkout()" class="checkout-btn">结算</button>
        </div>
      </div>
    </div>
    <div id="addAddressModal" class="modal" v-if="addrModal">
      <div class="modal-content">
        <span class="modal-close" id="closeModal" @click="addrModal = false">&times;</span>
        <h2>添加新地址</h2>
          <input type="text" id="name" name="name" placeholder="收货人" required v-model="addrForm.name">
          <input type="tel" id="phone" name="phone" placeholder="联系电话" required v-model="addrForm.phoneNumber">
          <input type="text" id="address" name="prov" placeholder="省份" required v-model="addrForm.province">
          <input type="text" id="address" name="cit" placeholder="市" required v-model="addrForm.city">
          <input type="text" id="address" name="area" placeholder="区" required v-model="addrForm.region">
          <input type="text" id="address" name="conc" placeholder="详细地址" required v-model="addrForm.detailAddress">
          <input type="text" id="address" name="conc" placeholder="邮政编码" required v-model="addrForm.postCode">
          <button @click="addAddr" >保存</button>
      </div>
    </div>
  </div>

</template>

<style scoped>
/* Global styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.brand {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.search-box {
  flex-grow: 1;
  margin: 0 20px;
  display: flex;
}

.search-box input {
  flex-grow: 1;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-left: none;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-box button:hover {
  background-color: #0056b3;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-right: 10px;
}

.user-info button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-info button:hover {
  background-color: #0056b3;
}

/* Address list styles */
.address-list {
  padding: 20px;
}

.address-card {
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
  padding: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.address-info {
  flex-grow: 1;
}

.address-actions {
  display: flex;
  align-items: center;
}

.address-actions button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  background-color: #dc3545;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.address-actions button:hover {
  background-color: #bd2130;
}

/* Add new address button */
.add-address {
  text-align: center;
  margin-top: 20px;
}

.add-address button {
  padding: 10px 20px;
  border: none;
  background-color: #28a745;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-address button:hover {
  background-color: #218838;
}

/* Modal styles */
.modal {
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 300px;
  max-width: 80%;
  position: absolute;
  left: calc(50% - 170px);
  top: 100px;
}

.modal-content input {
  width: calc(100% - 22px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;

}

.modal-content button {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #28a745;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-content button:hover {
  background-color: #218838;
}

.modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>